<template>
  <div class="data-view">
    <!-- 搜索输入框，用于输入菜单分类名称 -->
    <el-input
      placeholder="请输入菜单分类名称进行搜索"
      v-model="searchQuery"
      style="margin-bottom: 20px; width: 300px; display: inline-block;"
    ></el-input>
    <!-- 搜索按钮 -->
    <el-button type="primary" @click="handleSearch" style="margin-left: 10px;">搜索</el-button>
    <!-- 新增分类按钮 -->
    <el-button type="primary" @click="handleAdd" style="margin-left: 10px;">新增</el-button>
    <!-- 刷新按钮 -->
    <el-button type="default" @click="getList" style="margin-left: 10px;">刷新</el-button>
    <!-- 显示数据的表格 -->
    <el-table :data="tableData" style="width: 100%" border>
      <el-table-column
        prop="id"
        label="索引"
        width="180"
        align="center"
      ></el-table-column>
      <el-table-column
        prop="name"
        label="菜单分类"
        width="180"
        align="center"
      ></el-table-column>
      <el-table-column prop="cz" label="操作" align="center">
        <template #default="scope">
          <!-- 编辑按钮 -->
          <el-button
            type="primary"
            size="mini"
            @click="handleEdit(scope.row)"
            >编辑</el-button
          >
          <!-- 删除按钮 -->
          <el-button
            type="danger"
            size="mini"
            @click="confirmDelete(scope.row)"
            >删除</el-button
          >
          <!-- 详情按钮 -->
          <el-button
            type="info"
            size="mini"
            @click="handleDetail(scope.row)"
            >详情</el-button
          >
        </template>
      </el-table-column>
    </el-table>
  </div>
</template>

<script>
import { getList, deleteCategory, searchByName } from "@/api/user";

export default {
  data() {
    return {
      tableData: [], // 表格数据
      searchQuery: '', // 搜索查询
    };
  },
  methods: {
    // 跳转到新增分类页面
    handleAdd() {
      this.$router.push('/data/add');
    },
    // 跳转到编辑分类页面
    handleEdit(row) {
      this.$router.push({ path: `/data/edit/${row.id}` });
    },
    // 跳转到分类详情页面
    handleDetail(row) {
      this.$router.push({ path: `/data/detail/${row.id}` });
    },
    // 确认删除选中的分类
    confirmDelete(row) {
      const confirmed = window.confirm('确定要删除该分类吗?'); // 使用 window.confirm 进行确认
      if (confirmed) {
        this.handleDelete(row); // 如果确认，调用删除方法
      } else {
        this.$message.info('已取消删除'); // 如果取消，显示信息
      }
    },
    // 删除选中的分类
    handleDelete(row) {
      deleteCategory(row.id).then((res) => {
        this.$message.success("删除成功");
        this.getList(); // 删除后刷新列表
      });
    },
    // 根据名称搜索分类
    handleSearch() {
      if (this.searchQuery) {
        searchByName(this.searchQuery).then((res) => {
          this.tableData = res.data; // 更新表格数据为搜索结果
        }).catch(error => {
          this.$message.error('搜索失败：' + error.message);
        });
      } else {
        this.getList(); // 如果没有搜索查询，刷新列表
      }
    },
    // 获取分类列表
    getList() {
      getList().then((res) => {
        this.tableData = res.data; // 更新表格数据为获取的数据
        console.log(res);
      });
    },
  },
  created() {
    this.getList(); // 组件创建时获取列表
  },
};
</script>

<style scoped>
.data-view {
  padding: 20px; /* 数据视图的内边距 */
}
</style>
